/*
 * @Description:
 * @Author: 小雨
 * @Date: 2023-09-15 11:22:41
 * @LastEditTime: 2024-05-27 17:55:01
 * @LastEditors: 小雨
 */
const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index',
    mode: 'development',
    devtool: false,
    output: {
        filename: '[name].js', //控制输出资源的文件名.似模板语言的形式动态地生成文件名
        //将资源输出位置设置为该项目的dist目录
        path: path.join(__dirname, './dist'), //path指定资源输出的位置，要求值必须为绝对路径
    },
    module: {
        rules: [
            //     {
            //     test:/\.less$/i,  // 用来匹配 .less 结尾的文件
            //     includes:{ //includes匹配必须满足的文件路径（可选） exclude: 排除不需要匹配的文件路径（可选）
            //         and:[path.join(__dirname,'/.src/')]
            //     },
            //     use:[ //use: 指定使用的loader，可以是字符串、数组或对象
            //         "style-loader",
            //         "css-loader",
            //         //"./loader"
            //         {
            //             loader:"less-loader"  //loader: 使用的loader名称（是use的简写）
            //         }
            //     ]
            // },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: { //options: 传递给loader的选项（通常与use或loader一起使用）。options 属性在Webpack配置中扮演着重要角色，它允许开发者细化和定制加载器的行为，以满足特定的构建需求。通过设置options，可以灵活地控制加载器的处理方式，使其能够适应不同的文件类型和项目要求。
                            presets: ['@babel/preset-env'],  // 是一个智能预设，允许你使用最新的 JavaScript，而无需微观管理目标环境需要哪些语法转换（以及可选的浏览器 polyfill）。这既让你的生活更轻松，也让 JavaScript 包更小！@babel/preset-env 是一种 Babel 预设规则集 —— Preset
                        },
                    },
                ],
            },
            // {
            //     test: /\.js$/,
            //     use:[{
            //         loader:'babel-loader',
            //         options:{
            //             presets:['@babel/preset-typescript']  // 只是简单完成代码转换，并未做类似 ts-loader 的类型检查工作，大家需要根据实际场景选择适当工具。
            //         }
            //     }]
            // },
            {
                test: /\.ts$/,   //将ts转为js ts-loader 是由 TypeStrong 社区维护的一个开源项目，其目标是为 Webpack 用户提供一个高效、易用的 TypeScript 编译方案。通过集成 ts-loader，你可以直接在 Webpack 构建过程中编译 TypeScript 代码，无需离开你的现有工作流。
                use: [{
                    loader: 'babel-loader',
                    options: {  //为了配置babel-loader，通常会在其options属性中指定presets（预设）和plugins（插件）。presets 是一组预先配置好的Babel插件集合，用于简化配置过程。每个preset都包含了一组Babel插件，可以一起应用于代码转译。常用的presets包括
                        presets: ['@babel/preset-typescript'] //@babel/preset-typescript 插件转译 TypeScript 代码 在Babel的配置中，presets用于简化插件配置，确保代码可以在不同环境中运行。通过合理使用presets和相关配置选项，可以轻松管理和优化JavaScript代码的转译过程。
                    }
                }],
            },
            // {
            //     test: /\.css$/i ,//在正则表达式中，尾随的 i 是一个标志（flag），表示正则表达式的匹配是不区分大小写的（case-insensitive）。当你在Webpack配置中的 test 属性后面看到 i 标志时，表示这条规则会匹配所有符合正则表达式的文件名，而不管其大小写。
            //     use:["style-loader","css-loader"]
            // }
            // {
            //     test:/\.css$/i,
            //     use:[
            //         (process.env.NOOE_ENV==='development'?
            //             'style-loader':MiniCssExtractPlugin.loader),
            //         'css-loader',
            //     ]//mini-css-extract-plugin 库同时提供 Loader、Plugin 组件，需要同时使用 mini-css-extract-plugin 不能与 style-loader 混用，否则报错，所以上述示例中第 9 行需要判断 process.env.NODE_ENV 环境变量决定使用那个 Loader mini-css-extract-plugin 需要与 html-webpack-plugin 同时使用，才能将产物路径以 link 标签方式插入到 html 中
            // }
            // {
            //     test: /\.less$/,
            //     use:[
            //         "style-loader",
            //         "css-loader",
            //         "less-loader",
            //     ]
            // }
            {
                test: /\.css$/,
                use:[
                    "style-loader",
                    {
                        loader: 'css-loader',
                        options: { //importLoaders: 1 表示 @import 的资源会先经过 postcss-loader 处理，然后再经过 css-loader 处理。
                            importLoaders: 1, //详细解释importLoaders: 0：//默认值，表示 @import 的资源不会经过其他的 loader 处理。mportLoaders: 1：表示 @import 的资源会经过在 css-loader 之后的下一个 loader 处理。importLoaders: 2：表示 @import 的资源会经过在 css-loader 之后的下两个 loader 处理，依此类推。
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {  //postcssOptions 允许你详细配置 PostCSS 的行为，包括指定要使用的插件及其配置。通常你会在 postcss-loader 的 options 属性中使用 postcssOptions。
                                plugins: [require("autoprefixer")] // 使用 Autoprefixer 插件
                            }
                        }
                    }
                ]
            }
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'], //使用 resolve.extensions 声明自动解析 .ts 后缀文件，这意味着代码如 import "./a.ts" 可以忽略后缀声明，简化为 import "./a" 文件
    },
    plugins: [new ESLintPlugin({extensions: ['.js','.ts']}),new MiniCssExtractPlugin(),new HTMLWebpackPlugin()]   // 添加 eslint-webpack-plugin 插件实例
};
